<template>
  <div class="details">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="详情"
      left-text="返回"
      right-text="..."
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 店铺背景 -->
    <div class="dp"></div>
    <div class="ms">
      <!-- 侧边导航 -->
      <div class="left">
        <van-sidebar v-model="currentIndex">
          <van-sidebar-item
            v-for="(item, index) in shopinfo.taglist"
            :key="index"
            :title="item.name"
          />
        </van-sidebar>
      </div>
      <!-- 右边详情 -->
      <div class="right">
        <div
          class="shop"
          v-for="(item, index) in shopinfo.taglist[currentIndex].goodlist"
          :key="index"
        >
          <div class="img">
            <img :src="item.picture" alt="" />
          </div>
          <div class="text">
            <div class="up">
              <div class="name">{{ item.name }}</div>
              <div class="desc">{{ item.month_saled_content }}</div>
            </div>
            <div class="down">
              <div class="price">¥{{ item.min_price }}</div>
              <div class="opes">
                <span>-</span>
                <span>1</span>
                <span>+</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 购物车 -->
    <!-- <Buycart></Buycart> -->

    <!-- 结算按钮 -->
    <div class="cart">
      <div class="left">
        <van-icon name="cart" />总数:<span>0</span> 总价:<span>0</span>
      </div>
      <div class="right"><span>去结算</span></div>
    </div>
  </div>
</template>

<script>
import Buycart from "../components/Buycart.vue";
import { shop_shopinfo } from "../utils/api";
export default {
  data() {
    return {
      currentIndex: 0,
      shopinfo: {},
    };
  },
  components: {
    Buycart,
  },
  mounted() {
    shop_shopinfo({ id: this.$route.params.id }).then((res) => {
      //   console.log(res.data.shopinfo.taglist);
      this.shopinfo = res.data.shopinfo;
      //   console.log(this.shopinfo);
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang='scss' scoped>
.details .dp {
  height: 100px;
  background: pink;
}
.ms {
  display: flex;
  .right {
    flex: 1;
    .shop {
      display: flex;
      margin: 10px;
      img {
        width: 100px;
        margin-right: 10px;
        img {
          width: 100%;
        }
      }
      .text {
        flex: 1;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .down {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
.cart {
  width: 100%;
  height: 60px;
  background: #555;
  position: fixed;
  bottom: 0;
  color: white;
  .left {
    margin-left: 20px;
    line-height: 60px;
    span {
      margin-right: 10px;
    }
  }
  .right span {
    padding: 10px;
    background: springgreen;
    position: absolute;
    right: 10px;
    bottom: 10px;
    border-radius: 5px;
  }
}
</style>


